<template>
	<view ref="locale" class="locale" :class="locale=='zh-Hans'?'lang1':'lang2'" @click="onLocaleChange">
		<m-icon class="zh" type="zh"></m-icon>
		<m-icon class="en" type="en"></m-icon>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: "locale",
		data() {
			return {};
		},
		computed: {
			...mapState({
				locale: state => state.setting.locale
			})
		},
		mounted() {
			let systemInfo = uni.getSystemInfoSync();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
		},
		methods: {
			onLocaleChange(e) {
				const locale = this.locale == 'zh-Hans' ? 'EN' : 'zh-Hans';
				if (this.isAndroid) {
					uni.showModal({
						content: this.$t('index.language-change-confirm'),
						success: (res) => {
							if (res.confirm) {
								this.$store.commit('setting/SET_LOCALE', locale);
								uni.setLocale(locale);
							}
						}
					})
				} else {
					uni.setLocale(locale);
					this.$i18n.locale = locale;
					this.$store.commit('setting/SET_LOCALE', locale);
				}
			},
			change() {
				
			}
		}
	}
</script>

<style lang="scss">
	.lang1 {
		.zh {
			z-index: 9;
			left: -8rpx;
			top: -8rpx;
		}

		.en {
			z-index: 1;
			left: 8rpx;
			top: 8rpx;
			opacity: .7;

		}
	}

	.lang2 {
		.en {
			z-index: 9;
			left: -8rpx;
			top: -8rpx;
		}

		.zh {
			z-index: 1;
			left: 8rpx;
			top: 8rpx;
			opacity: .7;
		}

	}

	.move1 {
		text:nth-of-type(1) {
			animation: change1 .2s;
			animation-fill-mode: forwards;
		}

		text:nth-of-type(2) {
			animation: change2 .2s;
			animation-fill-mode: forwards;
		}
	}

	.move2 {
		text:nth-of-type(1) {
			animation: change2 .2s;
			animation-iteration-count: 1;
		}

		text:nth-of-type(2) {
			animation: change1 .2s;
			animation-iteration-count: 1;
		}
	}

	@-webkit-keyframes change1 {
		0% {
			left: 10rpx;
			top: 10rpx;
			z-index: 1;
		}

		90% {
			z-index: 1;
		}

		100% {
			left: -10rpx;
			top: -10rpx;
			z-index: 9;
		}
	}

	@-webkit-keyframes change2 {
		0% {
			left: -10rpx;
			top: -10rpx;
			z-index: 9;
		}

		90% {
			z-index: 9;
		}

		100% {
			left: 10rpx;
			top: 10rpx;
			z-index: 1;
		}
	}

	.locale {
		width: 36rpx;
		height: 36rpx;
		position: relative;
		top: 18rpx;
		left: -18rpx;

		image {
			width: 36rpx !important;
			height: 36rpx !important;
			display: block;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all .2s;
			opacity: 1;
		}
	}
</style>
